<template>
    <view class="page">
        <!-- 底部弹窗组件 时间日期组件-->
        <u-popup :show="show" @close="closePup" :round="20">
            <!-- 弹窗标题与关闭按钮 -->
            <view class="popup-header">
                <text @click="closePup">取消</text>
                <text @click="submit">确定</text>
            </view>
            <!-- 日期 -->
            <picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
                <picker-view-column>
                    <view class="item" v-for="(item, index) in data.years" :key="index">{{ item }}年</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="item" v-for="(item, index) in data.months" :key="index">{{ item }}月</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="item" v-for="(item, index) in data.days" :key="index">{{ item }}日</view>
                </picker-view-column>
            </picker-view>
        </u-popup>
    </view>
</template>

<script setup lang="js">
import { ref, reactive, defineEmits } from 'vue';
let props = defineProps(['times'])
let { times } = props
let emit = defineEmits(['getData'])
const indicatorStyle = ref(`height: 50px;`)
const show = ref(true)
let date = reactive(new Date())
const data = reactive({
    years: [],
    year: date.getFullYear(),
    months: [],
    month: date.getMonth() + 1,
    days: [],
    day: date.getDate(),
})

for (let i = 1990; i <= date.getFullYear(); i++) {
    data.years.push(i)
}
for (let i = 1; i <= 12; i++) {
    data.months.push(i)
}
for (let i = 1; i <= 31; i++) {
    data.days.push(i)
}
// 已经设置过时间 更新到默认 value中
let value = reactive([9999, data.month - 1, data.day - 1])
let a = data.years.indexOf(Number(times[0]))
let b = data.months.indexOf(Number(times[1]))
let c = data.days.indexOf(Number(times[2]))
if (times[0] != '') value = [a, b, c]

// 选择时间触发
const bindChange = (e) => {
    const val = e.detail.value
    data.year = data.years[val[0]]
    data.month = data.months[val[1]]
    data.day = data.days[val[2]]

}
// 关闭弹窗
const closePup = () => {
    show.value = false
};
// 确认选择
const submit = () => {
    const selected = `${data.year}-${data.month < 10 ? '0' + data.month : data.month}-${data.day < 10 ? '0' + data.day : data.day}`
    const timeStr = `${data.year}年-${data.month < 10 ? '0' + data.month : data.month}月-${data.day < 10 ? '0' + data.day : data.day}日`
    console.log('时间日期:', selected);
    let timeObj = reactive({
        time: selected,
        str: timeStr
    })
    emit('getData', timeObj)
    closePup();
};
</script>

<style lang="scss" scoped>
/* 遮罩层 */
.popup-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* 弹窗容器 */
.popup-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16rpx 16rpx 0 0;
    padding: 20rpx;
}

/* 选择器高度 */
.picker-view {
    height: 400rpx;
    margin: 30rpx 0;
}

.item {
    line-height: 80rpx;
    text-align: center;
}

/* 头部与关闭按钮 */
.popup-header {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;
    border-bottom: 1px solid #eee;
    font-size: 28rpx;
}

.close-btn {
    font-size: 40rpx;
    padding: 0 20rpx;
}
</style>